<template>
	<div class="real-time-quality-container">
		<el-tabs v-model="activeName" @tab-click="handleClick">
			<el-tab-pane label="实时质检" name="realtimeQuality">
				<div class="heard">
					<p class="title">
						<span>总分满分： {{ totalPoints }}</span>
						<span class="score">最低通过总分：{{ miniMum }}</span>
					</p>
					<div class="quality-wrapper">
						<el-button class="add-quality-btn" @click="addQualityInspectionitem" v-if="!lookDisable"> + 添加质检项</el-button>
						<div class="add-quality-inspection-item" v-show="isShowAddQuality">
							<ul>
								<li style="padding-top: 11px" @click="faceComparison">人脸比对</li>
								<li class="top" @click="invivoDetection">活体检测</li>
								<li @click="customerWords">客户敏感词</li>
								<li class="last-text" @click="agentWords">坐席敏感词</li>
							</ul>
						</div>
					</div>
				</div>
				<Table :tableData="tableData">
					<template v-slot:btn>
						<el-table-column width="250px" align="center" label="操作" v-if="!lookDisable">
							<template slot-scope="scope">
								<el-button size="mini" class="edit-btn" @click="editQuality(scope.row)">修改</el-button>
								<el-button size="mini" class="delete-btn" @click="deleteQuality(scope.row)" type="danger">删除</el-button>
							</template>
						</el-table-column>
					</template>
				</Table>
			</el-tab-pane></el-tabs
		>
		<el-button type="primary" class="back-btn" @click="goBack">返回</el-button>
		<!-- 添加人脸比对质检组件 -->
		<AddqualityInspectionVue
			v-if="showFaceComparisonDialog"
			:dialogVisible="showFaceComparisonDialog"
			:addTitle="addTitle"
			@closeAddquality="closeAddFaceComparison"
			@sureAddquality="sureAddFaceComparison"
		/>
		<!-- 添加活体检测质检组件 -->
		<AddqualityInspectionVue
			v-if="showInvivoDetectionDialog"
			:dialogVisible="showInvivoDetectionDialog"
			:addTitle="addTitle"
			@closeAddquality="closeAddInvivoDetection"
			@sureAddquality="sureAddInvivoDetection"
		/>
		<!-- 添加客户敏感词 组件 -->
		<AddSensitiveWords
			v-if="showCustomerDialog"
			:dialogVisible="showCustomerDialog"
			:addTitle="addTitle"
			@closeAddSensitiveWords="closeAddCustomerWords"
			@sureAddSensitiveWords="sureAddCustomerWords"
		/>
		<!-- 添加坐席敏感词 组件 -->
		<AddSensitiveWords v-if="showAgentDialog" :dialogVisible="showAgentDialog" :addTitle="addTitle" @closeAddSensitiveWords="closeAddAgentWords" @sureAddSensitiveWords="sureAddAgentWords" />
		<!-- 修改人脸比对质检组件 -->
		<EditQualityInspectionVue
			:dialogVisible="showEditFaceComparison"
			:addTitle="editTitle"
			:editFaceComData="editFaceComData"
			v-if="showEditFaceComparison"
			@closeAddquality="closeEditFaceComparison"
			@sureAddquality="sureEditFaceComparison"
		/>
		<!-- 修改活体检测质检组件 -->
		<EditQualityInspectionVue
			:dialogVisible="showEditInvivo"
			v-if="showEditInvivo"
			:addTitle="editTitle"
			:editFaceComData="editFaceComData"
			@closeAddquality="closeEditInvivo"
			@sureAddquality="sureEditInvivo"
		/>
		<!-- 修改客户敏感词质检组件 -->
		<!-- v-if="showEditCustomer" -->
		<EditSensitiveWords
			:dialogVisible="showEditCustomer"
			v-if="showEditCustomer"
			:editSensitiveWordsData="editSensitiveWordsData"
			:addTitle="editTitle"
			@closeAddSensitiveWords="closeEditCustomerWords"
			@sureAddSensitiveWords="sureEditCustomerWords"
		/>
		<!-- 修改坐席敏感词质检组件 -->
		<EditSensitiveWords
			:dialogVisible="showEditAgnet"
			v-if="showEditAgnet"
			:editSensitiveWordsData="editSensitiveWordsData"
			:addTitle="editTitle"
			@closeAddSensitiveWords="closeEditAgnetWords"
			@sureAddSensitiveWords="sureEditAgnetWords"
		/>
	</div>
</template>

<script>
import Table from '../components/Table.vue';
import AddqualityInspectionVue from './compments/AddqualityInspection.vue';
import AddSensitiveWords from './compments/AddSensitiveWords.vue';
import EditQualityInspectionVue from './compments/AddqualityInspection.vue';
import EditSensitiveWords from './compments/AddSensitiveWords.vue';
import { addQualityes, getAllQualityesList, getSingleQualityes, deleteQualityesById, updateQualityesById, validateByCategory } from '@/api/api.js';
export default {
	name: '',
	components: { Table, AddqualityInspectionVue, AddSensitiveWords, EditQualityInspectionVue, EditSensitiveWords },
	props: {},
	data() {
		return {
			activeName: 'realtimeQuality',
			tableData: {
				sort: false,
				tableHead: [
					{
						label: '质检项',
						prop: 'qualityItems'
					},
					{
						label: '单项满分',
						prop: 'singleScore'
					},
					{
						label: '单次未合规扣分',
						prop: 'deductScore'
					},
					{
						label: '单项通过分值',
						prop: 'singlePassScore'
					}
				],
				tableConent: [],
				showIndex: false,
				showCheck: false
			},
			isShowAddQuality: false, // + 添加质检项显示质检项
			showFaceComparisonDialog: false, //是否显示人脸比对新增弹框
			addTitle: '', //新增组件弹框标题
			showInvivoDetectionDialog: false, //是否显示活体活体检测
			showCustomerDialog: false, //是否显示访客敏感词弹框
			showAgentDialog: false, //是否显示坐席敏感词弹框
			lookDisable: true, //查看按钮禁止点击
			totalPoints: 0, //总分满分
			miniMum: 0, //最低通过分
			editTitle: '', //编辑组件弹框标题
			showEditFaceComparison: false, //是否显示修改人脸比对质检弹框
			//  修改人脸比对质检数据
			editFaceComData: {
				singleScore: '',
				deductScore: '',
				singlePassScore: ''
			},
			showEditInvivo: false, //是否显示修改活体检测质检弹框
			showEditCustomer: false, //是否显示修改客户敏感词弹框
			showEditAgnet: false, //是否显示修改坐席敏感词弹框
			//  修改敏感词质检数据
			editSensitiveWordsData: {
				sensitiveWords: '',
				dynamicTags: [],
				singleScore: '',
				deductScore: '',
				singlePassScore: ''
			},
			//业务场景传过来的id
			scenId: JSON.parse(sessionStorage.getItem('sceneData'))?.id || this.$route.query.scenId,
			editId: 0 //编辑场景质检项id
		};
	},
	mounted() {
		this.lookDisable = this.$route.query.showDisable;
		console.log('realQuality', this.$route.query, this.$route.query.showDisable);
		this.initQualityesList();
	},
	methods: {
		// + 添加质检项
		addQualityInspectionitem() {
			this.isShowAddQuality = !this.isShowAddQuality;
		},
		// 编辑质检项
		editQuality(row) {
			console.log('editQuality', row);
			this.editFaceComData.singleScore = row.singleScore;
			this.editFaceComData.deductScore = row.deductScore;
			this.editFaceComData.singlePassScore = row.singlePassScore;
			if (row.category === '1') {
				this.editTitle = '修改人脸比对质检';
				console.log(this.editFaceComData, '人脸比对');
				this.showEditFaceComparison = true;
				this.editId = row.id;
			}
			if (row.category === '2') {
				this.editTitle = '修改活体检测质检';
				console.log(this.editFaceComData, '活体检测');
				this.showEditInvivo = true;
				this.editId = row.id;
			}
			if (row.category === '3') {
				this.initSingleByQualityes(row.id);
				this.editTitle = '修改客户敏感词质检';
				this.showEditCustomer = true;
				this.editId = row.id;
			}
			if (row.category === '4') {
				this.initSingleByQualityes(row.id);
				this.editTitle = '修改坐席敏感词质检';
				console.log(this.editSensitiveWordsData, '坐席敏感词');
				this.showEditAgnet = true;
				this.editId = row.id;
			}
		},
		// 删除质检项
		deleteQuality(row) {
			console.log('deleteQuality', row);
			this.$confirm(`确定要删除<${row.qualityItems}>质检项吗?, 是否继续?`, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					deleteQualityesById(this.scenId, row.id)
						.then(res => {
							console.log(res.data);
							if (res.data.code === 200) {
								this.$message.success('删除成功！');
								this.initQualityesList();
							} else {
								console.log('deleteQuality function error', res.data);
							}
						})
						.catch(error => {
							console.log(error);
							if (error.code === 6008) {
								this.$message.error('实时质检开启状态下禁止该操作!');
							} else if (error.code == 6009) {
								this.$message.error(`业务场景启用中，无法进行操作！`);
							}
						});
				})
				.catch(err => {
					console.log(err);
				});
		},
		// 新增 人脸比对质检 相关方法
		async faceComparison() {
			try {
				const { data } = await validateByCategory(this.scenId, '1');
				console.log(data);
				if (data.code === 200) {
					// 长度大于0，添加质检项时，该质检项已经被添加
					if (data?.data?.data?.length > 0) {
						this.$message.error('该质检项已添加');
						return;
					}
					this.showFaceComparisonDialog = true;
					this.addTitle = '添加人脸比对质检';
				} else {
					console.log('getSingleByQualityes function error', data);
				}
			} catch (error) {
				console.log(error);
				this.$message.error('获取单项实时质检配置失败！');
			}
		},
		/**
		 *点击确定按钮提交人脸比对
		 * @param {*} form
		 */
		async sureAddFaceComparison(form) {
			console.log('sureAddFaceComparison:', form);
			try {
				let params = {
					name: '人脸比对',
					category: '1',
					totalPoint: Number(form.singleScore),
					substractPoint: Number(form.deductScore),
					thresholdPoint: Number(form.singlePassScore)
				};
				const { data } = await addQualityes(this.scenId, params);
				console.log(data);
				if (data.code === 200) {
					this.$message.success('质检项添加成功！');
					this.showFaceComparisonDialog = false;
					this.initQualityesList();
				} else {
					console.log('sureAddFaceComparison function error', data);
				}
			} catch (error) {
				console.log(error);
				if (error.code === 6005) {
					this.$message.error('该质检项已添加！');
				} else if (error.code === 6008) {
					this.$message.error('实时质检开启状态下禁止该操作!');
				} else if (error.code == 6009) {
					this.$message.error(`业务场景启用中，无法进行操作！`);
				} else {
					this.$message.error('质检项添加失败！');
				}
			}
		},
		// 点击取消按钮关闭人脸比对弹窗
		closeAddFaceComparison() {
			this.showFaceComparisonDialog = false;
		},
		// 新增活体检测质检相关方法
		async invivoDetection() {
			try {
				const { data } = await validateByCategory(this.scenId, '2');
				console.log(data);
				if (data.code === 200) {
					// 长度大于0，添加质检项时，该质检项已经被添加
					if (data?.data?.data?.length > 0) {
						this.$message.error('该质检项已添加');
						return;
					}
					this.showInvivoDetectionDialog = true;
					this.addTitle = '添加活体检测质检';
				} else {
					console.log('getSingleByQualityes function error', data);
				}
			} catch (error) {
				console.log(error);
				this.$message.error('获取单项实时质检配置失败！');
			}
		},

		// 点击取消按钮关闭活体检测弹窗
		closeAddInvivoDetection() {
			this.showInvivoDetectionDialog = false;
		},
		/**
		 *点击确定按钮提交活体检测
		 * @param {*} form
		 */
		async sureAddInvivoDetection(form) {
			console.log('sureAddInvivoDetection:', form);
			try {
				let params = {
					name: '活体检测',
					category: '2',
					totalPoint: Number(form.singleScore),
					substractPoint: Number(form.deductScore),
					thresholdPoint: Number(form.singlePassScore)
				};
				const { data } = await addQualityes(this.scenId, params);
				console.log(data);
				if (data.code === 200) {
					this.$message.success('质检项添加成功！');
					this.showInvivoDetectionDialog = false;
					this.initQualityesList();
				} else {
					console.log('sureAddInvivoDetection function error', data);
				}
			} catch (error) {
				console.log(error);
				if (error.code === 6005) {
					this.$message.error('该质检项已添加！');
				} else if (error.code === 6008) {
					this.$message.error('实时质检开启状态下禁止该操作!');
				} else if (error.code == 6009) {
					this.$message.error(`业务场景启用中，无法进行操作！`);
				} else {
					this.$message.error('质检项添加失败！');
				}
			}
		},
		// 点击返回按钮回到业务场景配置项页面
		goBack() {
			this.$router.go(-1);
		},
		//  添加客户敏感词相关方法
		async customerWords() {
			try {
				const { data } = await validateByCategory(this.scenId, '3');
				console.log(data);
				if (data.code === 200) {
					// 长度大于0，添加质检项时，该质检项已经被添加
					if (data?.data?.data?.length > 0) {
						this.$message.error('该质检项已添加');
						return;
					}
					this.showCustomerDialog = true;
					this.addTitle = '添加客户敏感词质检';
				} else {
					console.log('getSingleByQualityes function error', data);
				}
			} catch (error) {
				console.log(error);
				this.$message.error('获取单项实时质检配置失败！');
			}
		},
		// 点击取消按钮关闭访客敏感词弹窗
		closeAddCustomerWords() {
			this.showCustomerDialog = false;
		},
		/**
		 *点击确定按钮提交访客敏感词
		 * @param {*} form
		 */
		async sureAddCustomerWords(form) {
			console.log('sureAddCustomerWords', form);
			try {
				let params = {
					name: '客户敏感词',
					category: '3',
					totalPoint: Number(form.singleScore),
					substractPoint: Number(form.deductScore),
					thresholdPoint: Number(form.singlePassScore),
					badWords: form.dynamicTags
				};
				const { data } = await addQualityes(this.scenId, params);
				console.log(data);
				if (data.code === 200) {
					this.$message.success('质检项添加成功！');
					this.showCustomerDialog = false;
					this.initQualityesList();
				} else {
					console.log('sureAddCustomerWords function error', data);
				}
			} catch (error) {
				console.log(error);
				if (error.code === 6005) {
					this.$message.error('该质检项已添加！');
				} else if (error.code === 6008) {
					this.$message.error('实时质检开启状态下禁止该操作!');
				} else if (error.code == 6009) {
					this.$message.error(`业务场景启用中，无法进行操作！`);
				} else {
					this.$message.error('质检项添加失败！');
				}
			}
		},
		//  添加 坐席敏感词相关方法
		async agentWords() {
			try {
				const { data } = await validateByCategory(this.scenId, '4');
				console.log(data);
				if (data.code === 200) {
					// 长度大于0，添加质检项时，该质检项已经被添加
					if (data?.data?.data?.length > 0) {
						this.$message.error('该质检项已添加');
						return;
					}
					this.showAgentDialog = true;
					this.addTitle = '添加坐席敏感词质检';
				} else {
					console.log('getSingleByQualityes function error', data);
				}
			} catch (error) {
				console.log(error);
				this.$message.error('获取单项实时质检配置失败！');
			}
		},
		// 点击取消按钮关闭坐席敏感词弹窗
		closeAddAgentWords() {
			this.showAgentDialog = false;
		},
		/**
		 *点击确定按钮提交坐席敏感词
		 * @param {*} form
		 */
		async sureAddAgentWords(form) {
			console.log('sureAddAgentWords', form);
			try {
				let params = {
					name: '坐席敏感词',
					category: '4',
					totalPoint: Number(form.singleScore),
					substractPoint: Number(form.deductScore),
					thresholdPoint: Number(form.singlePassScore),
					badWords: form.dynamicTags
				};
				const { data } = await addQualityes(this.scenId, params);
				console.log(data);
				if (data.code === 200) {
					this.$message.success('质检项添加成功！');
					this.showAgentDialog = false;
					this.initQualityesList();
				} else {
					console.log('sureAddAgentWords function error', data);
				}
			} catch (error) {
				console.log(error);
				if (error.code === 6005) {
					this.$message.error('该质检项已添加！');
				} else if (error.code === 6008) {
					this.$message.error('实时质检开启状态下禁止该操作!');
				} else if (error.code == 6009) {
					this.$message.error(`业务场景启用中，无法进行操作！`);
				} else {
					this.$message.error('质检项添加失败！');
				}
			}
		},
		// 点击取消按钮关闭人脸比对弹窗
		closeEditFaceComparison() {
			this.showEditFaceComparison = false;
		},
		/**
		 *点击确定按钮提交修改人脸比对质检
		 * @param {*} form
		 */
		async sureEditFaceComparison(form) {
			console.log('sureEditFaceComparison:', form);
			try {
				let params = {
					name: '人脸比对',
					category: '1',
					totalPoint: Number(form.singleScore),
					substractPoint: Number(form.deductScore),
					thresholdPoint: Number(form.singlePassScore)
				};
				const { data } = await updateQualityesById(this.scenId, this.editId, params);
				console.log(data);
				if (data.code === 200) {
					this.$message.success('修改成功');
					this.showEditFaceComparison = false;
					this.initQualityesList();
				} else {
					console.log('sureEditFaceComparison function error', data);
				}
			} catch (error) {
				console.log(error);
				if (error.code === 6008) {
					this.$message.error('实时质检开启状态下禁止该操作!');
				} else if (error.code == 6009) {
					this.$message.error(`业务场景启用中，无法进行操作！`);
				} else {
					this.$message.error('修改失败');
				}
			}
		},
		// 点击取消按钮关闭活体检测弹窗
		closeEditInvivo() {
			this.showEditInvivo = false;
		},
		/**
		 *点击确定按钮提交修改活体检测质检
		 * @param {*} form
		 */
		async sureEditInvivo(form) {
			console.log('sureEditInvivo:', form);
			try {
				let params = {
					name: '活体检测',
					category: '2',
					totalPoint: Number(form.singleScore),
					substractPoint: Number(form.deductScore),
					thresholdPoint: Number(form.singlePassScore)
				};
				const { data } = await updateQualityesById(this.scenId, this.editId, params);
				console.log(data);
				if (data.code === 200) {
					this.$message.success('修改成功');
					this.showEditInvivo = false;
					this.initQualityesList();
				} else {
					console.log('sureEditInvivo function error', data);
				}
			} catch (error) {
				console.log(error);
				this.showEditInvivo = false;
				if (error.code === 6008) {
					this.$message.error('实时质检开启状态下禁止该操作!');
				} else if (error.code == 6009) {
					this.$message.error(`业务场景启用中，无法进行操作！`);
				} else {
					this.$message.error('修改失败');
				}
			}
		},
		// 点击取消按钮关闭访客敏感词弹窗
		closeEditCustomerWords() {
			this.showEditCustomer = false;
		},
		/**
		 *点击确定按钮提交修改后的访客敏感词
		 * @param {*} form
		 */
		async sureEditCustomerWords(form) {
			console.log('sureEditCustomerWords', form);
			try {
				let params = {
					name: '客户敏感词',
					category: '3',
					totalPoint: Number(form.singleScore),
					substractPoint: Number(form.deductScore),
					thresholdPoint: Number(form.singlePassScore),
					badWords: form.dynamicTags
				};
				const { data } = await updateQualityesById(this.scenId, this.editId, params);
				console.log(data);
				if (data.code === 200) {
					this.$message.success('修改成功');
					this.showEditCustomer = false;
					this.initQualityesList();
				} else {
					console.log('sureEditCustomerWords function error', data);
				}
			} catch (error) {
				console.log(error);
				if (error.code === 6008) {
					this.$message.error('实时质检开启状态下禁止该操作!');
				} else if (error.code == 6009) {
					this.$message.error(`业务场景启用中，无法进行操作！`);
				} else {
					this.$message.error('修改失败');
				}
			}
		},
		// 点击取消按钮关闭坐席敏感词弹窗
		closeEditAgnetWords() {
			this.showEditAgnet = false;
		},
		/**
		 *点击确定按钮提交修改后的坐席敏感词
		 * @param {*} form
		 */
		async sureEditAgnetWords(form) {
			console.log('sureEditAgnetWords', form);
			this.showEditAgnet = false;
			try {
				let params = {
					name: '坐席敏感词',
					category: '4',
					totalPoint: Number(form.singleScore),
					substractPoint: Number(form.deductScore),
					thresholdPoint: Number(form.singlePassScore),
					badWords: form.dynamicTags
				};
				const { data } = await updateQualityesById(this.scenId, this.editId, params);
				console.log(data);
				if (data.code === 200) {
					this.$message.success('修改成功');
					this.showEditAgnet = false;
					this.initQualityesList();
				} else {
					console.log('sureEditAgnetWords function error', data);
				}
			} catch (error) {
				console.log(error);
				if (error.code === 6008) {
					this.$message.error('实时质检开启状态下禁止该操作!');
				} else if (error.code == 6009) {
					this.$message.error(`业务场景启用中，无法进行操作！`);
				} else {
					this.$message.error('修改失败');
				}
			}
		},
		/**
		 * 初始化实时质检配置列表
		 * @param {Number} scenId 场景id
		 */
		async initQualityesList() {
			try {
				const { data } = await getAllQualityesList(this.scenId);
				console.log(data);
				if (data.code === 200) {
					this.totalPoints = 0;
					this.miniMum = 0;
					this.tableData.tableConent = this.getInfoData(data.data.data);
				} else {
					console.log('initQualityesList function error', data);
				}
			} catch (error) {
				console.log(error);
				this.$message.error('获取全部实时质检配置失败！');
			}
		},
		/**
		 * 初始化单项实时质检配置数据
		 * @param {Number} scenId 场景id
		 */
		async initSingleByQualityes(id) {
			try {
				const { data } = await getSingleQualityes(this.scenId, id);
				console.log(data);
				if (data.code === 200) {
					const { name, totalPoint, substractPoint, thresholdPoint, badWords } = data.data;
					console.log(name, totalPoint, substractPoint, thresholdPoint, badWords);
					this.editSensitiveWordsData.dynamicTags = badWords;
					this.editSensitiveWordsData.singleScore = totalPoint;
					this.editSensitiveWordsData.deductScore = substractPoint;
					this.editSensitiveWordsData.singlePassScore = thresholdPoint;
					console.log(this.editSensitiveWordsData, '敏感词');
				} else {
					console.log('initSingleByQualityes function error', data);
				}
			} catch (error) {
				console.log(error);
				this.$message.error('获取单项实时质检配置失败！');
			}
		},
		// 接口返回的数据处理
		getInfoData(array) {
			return array.map(item => {
				this.totalPoints += item.totalPoint;
				this.miniMum += item.thresholdPoint;
				return {
					qualityItems: item.name,
					singleScore: item.totalPoint,
					deductScore: item.substractPoint,
					singlePassScore: item.thresholdPoint,
					category: item.category,
					dynamicTags: item.badWords,
					id: item.id
				};
			});
		}
	}
};
</script>

<style lang="less" scoped>
.real-time-quality-container {
	position: relative;
	.heard {
		position: relative;
		.title {
			font-size: 14px;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			.score {
				padding-left: 15px;
			}
		}
		.quality-wrapper {
			position: absolute;
			top: 0;
			right: 20px;
			.add-quality-btn {
				background: #ffffff;
				border: 1px solid #6384fe;
				border-radius: 4px;

				font-size: 12px;
				font-family: PingFang SC;
				font-weight: 400;
				color: #6384fe;
				padding: 0 15px;
				line-height: 21px;
				cursor: pointer;
			}
			.add-quality-inspection-item {
				background: #ffffff;
				box-shadow: 0px 2px 8px 0px rgba(35, 24, 21, 0.18);
				border-radius: 4px;
				text-align: center;
				ul {
					margin-top: 8px;
					font-size: 12px;
					font-family: PingFang SC;
					font-weight: 400;
					color: #606266;

					height: 144px;
					li {
						cursor: pointer;
					}
					.top {
						margin: 11px 0px;
					}
					.last-text {
						padding: 11px 0 17px 0;
					}
				}
			}
		}
	}
	.edit-btn {
		border-radius: 4px;
		color: #fff;
		background-color: #6384fe;
	}
	.delete-btn {
		border-radius: 4px;
		color: #fff;
		background-color: #ef5652;
	}
	.back-btn {
		background: #6384fe;
		border-radius: 4px;
		line-height: 3px;
		position: absolute;
		top: 0;
		right: 20px;
	}
	/deep/.el-tab-pane {
		padding-bottom: 30px;
	}
}
</style>

<style lang="less">
.real-time-quality-container .el-tabs__active-bar {
	background-color: #6384fe !important;
}
.real-time-quality-container .el-tabs__item.is-active {
	font-size: 15px;
	font-family: PingFang SC;
	font-weight: 500;
	color: #6384fe !important;
}
.real-time-quality-container .el-table thead {
	color: #676a6c;
	tr {
		th {
			background-color: #f8f8f9;
		}
	}
}
.real-time-quality-container {
	.table {
		width: 80% !important;
		margin-top: 16px;
	}
}
</style>
